<template>
  <div id="product_detail">
    <!-- 导航栏 -->
    <navbar title="商品详情页面" />
    <div class="main">
      <!-- 商品图片轮播图 -->
      <van-swipe class="swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(image,index) in productObj.images " :key="'image_'+index">
          <van-image :src="image" class="image" fit="cover" @click="previewImage"/>
        </van-swipe-item>
      </van-swipe>
      <!-- 商品信息展示 -->
      <div class="product_info">
        <div class="product_info__name">{{ productObj.name }}</div>
        <div class="product_info__desc">{{ productObj.desc }}</div>
        <div class="product_info_price">
          <div class="product_info__price">{{ productObj.formats[0].price }}</div>
        <div class="product_info__old_price">{{ productObj.formats[0].old_price }}</div>
        </div>
      </div>
      <!-- 商品详情展示 -->
      <van-cell-group title="商���规格">
        <van-cell title="当前规格" :value="productObj.formats[0].format_label" />
        <van-cell title="原产地" :value="productObj.location" />
      </van-cell-group>
      <van-cell-group title="商品详情">
        <van-collapse v-model="activeDetail" @change="onDetailChange" >
          <van-collapse-item title="详情" name="detail">
            <div class="product__detail" v-html="productObj.detail"></div>
          </van-collapse-item>
        </van-collapse>
      </van-cell-group>
    </div>

    <!-- 商品导航 -->
    <van-goods-action>
      <van-goods-action-icon icon="cart-o" text="购物车" color="#5ba0f4" @click="onClickCartIcon" />
      <van-goods-action-icon icon="star-o" text="收藏" color="#ff5000" />
      <van-goods-action-button type="danger" text="立即购买" @click="onClickPurchaseButton"/>
    </van-goods-action>
  </div>
</template>

<script>
import NavBar from '../components/NavBar.vue'
import { IMAGE_PREFIX } from '../config'
import wx from 'weixin-js-sdk'
export default {
  components: {
    navbar: NavBar
  },
  data () {
    return {
      // 商品对象
      productObj: {},
      // 详情展开
      activeDetail: []
    }
  },
  methods: {
    /**
     * 业务:获取商品详情数据
     */
    getProductDetail (productId) {
      this.$http.get(`/products/query?id=${productId}`)
        .then(({ data: res }) => {
          const { meta, data } = res
          if (meta.code !== 200) {
            return this.$notify(meta.code)
          }
          this.productParser(data)
        })
        .catch(error => {
          this.$notify(error)
        })
    },
    // 商品详情数据解析器
    productParser (rowData) {
      const { name, image: imageStr, info: desc, source: location, content: detail, list } = rowData
      const images = imageStr.split(';').map(item => IMAGE_PREFIX + item)
      const formats = []
      list.forEach(item => {
        // console.log(item)
        const { id, scale: formatLabel, price, oldPrice } = item
        const format = { id, format_label: formatLabel, price, old_price: oldPrice }
        formats.push(format)
      })
      this.productObj = {
        name: name,
        desc: desc,
        formats: formats,
        detail: detail,
        images: images,
        location: location
      }
    },
    // 点击购物车按钮
    onClickCartIcon () {
      this.$router.push('/cart')
    },
    // 点击 购买 按钮
    onClickPurchaseButton () {
      this.$notify({ message: '点击购买按钮', type: 'primary', duration: 2000 })
    },
    // 展开详情
    onDetailChange (activeNames) {
      this.activeDetail = activeNames
    },
    // 点击图片
    previewImage (e) {
      // console.log(e)
      wx.previewImage({
        current: this.productObj.images[0], // 当前显示图片的http链接
        urls: this.productObj.images // 需要预览的图片http链接列表
      })
    }
  },
  created () {
    // 获取路由地址上的商品id
    const productId = this.$route.params.product_id
    // console.log('productId: ', productId)
    this.getProductDetail(productId)
  }
}
</script>

<style lang="less" scope="scoped">
#product_detail{
  width:100%;
  box-sizing: border-box;
  .main{
    margin-bottom: 55px;
    box-sizing: border-box;
    .swipe{
      width:100%;
      height: 230px;
      box-sizing: border-box;
      .image{
        width:100%;
        height: 100%;
      }
    }
    .product_info{
      box-sizing: border-box;
      width:100%;
      margin: 5px auto;
      display:flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
      padding:2px 8px;
      box-shadow: 0 0 1px #7f8c8d;
      .product_info__name{
        font-size: 16px;
      }
      .product_info__desc{
        color:#bdc3c7;
        font-size:13px;
        width:100%;
        flex-wrap: wrap;
        text-align: left;
        margin:5px auto;
      }
      .product_info_price{
        display:flex;
        flex-direction: row;
        align-items: flex-end;
        .product_info__price{
          color:#e74c3c;
          margin-right: 5px;
        }
        .product_info__price::before{
          content:'¥';
        }
        .product_info__old_price{
          font-size:14px;
          text-decoration: line-through;
        }
        .product_info__old_price::before{
          content:'¥';
        }
      }
      // 详情html
      .product__detail{
        width:100%;
      }
    }
  }
}
.van-cell-group__title{
  font-size: 12px;
}
.van-cell{
  padding:5px 16px;
}

</style>
